<template>
  <div class="toplistchild">
    <el-container>
      <el-aside width="240px">
        <!-- <toplistside ></toplistside> -->
        <div class="toplistside">
      <div style="margin-top:40px;width:100%;height:1936px">
          <h2 style="width:215px;height:16px;margin:0 10px 23px 15px">
              云音乐特色榜
          </h2>
          <ul style="width:240px;height:248px" class="tlsul">
          <li @click="growup" :class="{active01:tag==19723756}">飙升榜</li>
          <li @click="newss" :class="{active01:tag==3779629}">新歌榜</li>
          <li @click="originalsongs" :class="{active01:tag==2884035}">原创榜</li>
          <li @click="hotsong" :class="{active01:tag==3778678}">热歌榜</li>
          </ul>
      </div>
    </div>
        </el-aside>
      <el-main height="7306px" class="tcelmain">
        <div class="tlheader" style="position:relative">
         <div style="float:left"><img :src="toplistimg[0]" alt="" style="width:150px;height:150px"></div>
        
           <h4 style="margin-left:10px;position:absolute;left:180px;font-size:20px">飙升榜</h4>
  
        </div>
        <div class="tlfooter">
          <div class="tlfooter_title">
            <h3><span>歌曲列表</span></h3>
          </div>
          <div class="tlfooter_main">
            <table class="tctable">
              <thead>
                <tr style="width: 669px">
                  <th style="width: 78px"></th>
                  <th style="width: 327px">标题</th>
                  <th style="width: 91px">时长</th>
                  <th style="width: 173px">歌手</th>
                </tr>
              </thead>
              <thead v-for="(items, index) in toplist">
                <tr :class="{ active: index <= 2, active1: index % 2 == 0 }">
                  <th>{{ index + 1 }}</th>
                  <th>
                    <img
                      v-if="index <= 2"
                      :src="items.al.picUrl"
                      alt=""
                      width="50px"
                      height="50px"
                    />
                    {{ items.name }}
                  </th>
                  <th>3:10</th>
                  <th>{{ items.ar[0].name }}</th>
                </tr>
              </thead>
            </table>
            <div class="tlfooter_title" style="margin-top: 40px">
              <h3><span>歌曲列表</span></h3>
              <div class="tlfooter_title" style="margin-top: 40px">
                <h5><span>精彩评论</span></h5>
              </div>
              <!-- <ul>
                <li v-for="items in tlcomment">
                  <span class="skyblue">{{ items.user.nickname }}</span> :
                  {{ items.content }}
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import toplistside from '@/components/common/toplistside.vue'
export default {
    name:'toplistchild',
    components:{
      //  toplistside
   },
   data(){
     return{
        gup:'19723756',
        gup1:'3779629',
        gup2:'2884035',
        gup3:'3778678',
        tag:'',
        imgurl:'@/assets/images/hotsongs.jpg'
     }
   },
   props:{
     toplist:{
            type:Array,
            default(){
                return[]
            }
        },
    toplistimg:{
          type:Array,
            default(){
                return[]
            }
        }
   },
    methods:{
        growup(gup){
            this.$emit('selectd',this.gup)
            this.tag=this.gup

        },
        newss(gup1){
         this.$emit('selectd',this.gup1)
             this.tag=this.gup1
             
        },
        originalsongs(gup2){
         this.$emit('selectd',this.gup2)
         this.tag=this.gup2
        },
        hotsong(gup3){
         this.$emit('selectd',this.gup3)
         this.tag=this.gup3
        }
    }
  //  },
  //  methods:{
  //    selectd(gup){
  //       console.log(gup)
  //    }
  //  }
}
</script>



 <style>
 .tctable {
   border: solid 1px;
   border-top:none ;
 }
 .tcelmain {
   border-right:1px solid ;
 }
 .toplistside {
   border:solid 1px;
 }
 .skyblue {
    color: rgb(12, 115, 194);
}
.active {
    height:70px;
}
.active1 {
   background-color: rgb(247, 247, 247);
}
 .toplistchild {
     width: 980px;
     height: 7306.52px;
     margin-left: 310px;
     background-color: rgb(249, 249, 249);
 }
 .el-main {
    background-color: rgb(255,255,255);
  
    height: 7306px;
    line-height: 33px;
    text-align: left;
  }
  .tlheader{
    height: 158px;
    width: 740px;
    margin: 40px;

  }
   .tlfooter {
    width: 670px;
    background-color: rgb(255,255,255);
    height: 900px;
    margin: 0 30px 40px 40px;
   }
   .tlfooter_title {
       width: 670px;
       height: 33px;
       border-bottom: solid rgb(194, 12, 12) 2px;
   }
   th {
       height: 30px;
   }
   table {
       background-color: rgb(255,255,255);
       font-weight: normal;
       font-size: 12px;
   }
    .toplistside {
        width: 240px;
        height: 1976px;
    }
    .tlsul li{
        width:220px;
        height: 42px;
        padding: 10px 0 10px 20px;
    }
    .active01{
      background-color: rgb(230, 230, 230);
    }
</style>
    <!-- <h2 class="tit">推荐</h2>
            <ul style="width: 160px; height: 62px">
              <li class=".main_li" style="width: 160px; height: 40px">
                推荐歌手
              </li>
              <li class=".main_li" style="width: 160px; height: 40px">
                入驻歌手
              </li>
            </ul>
            <div class="blk">
              <h2 class="tit">华语</h2>
              <ul class="f-cb">
                <li>华语男歌手</li>
                <li>华语女歌手</li>
                <li>华语组合/乐队</li>
              </ul>
            </div>
            <div class="blk">
              <h2 class="tit">欧美</h2>
              <ul class="f-cb">
                <li>欧美男歌手</li>
                <li>欧美女歌手</li>
                <li>欧美组合/乐队</li>
              </ul>
            </div>
            <div class="blk">
              <h2 class="tit">日本</h2>
              <ul class="f-cb">
                <li>日本男歌手</li>
                <li>日本女歌手</li>
                <li>日本组合/乐队</li>
              </ul>
            </div>
            <div class="blk">
              <h2 class="tit">其他</h2>
              <ul class="f-cb">
                <li>其他男歌手</li>
                <li>其他女歌手</li>
                <li>其他组合/乐队</li>
              </ul>
            </div>

            <div class="blk">
              <h2 class="tit">华语</h2>
              <ul class="f-cb">
                <li>华语男歌手</li>
                <li>华语女歌手</li>
                <li>华语组合/乐队</li>
              </ul> -->
            <!-- </div> -->